<template>
  <div>
    <h1>App</h1>
    <p>fullName:{{ fullName }}</p>
    <button @click="fullName = 'wang wu'">修改姓名</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, computed } from 'vue';

const firstName = ref('zhang');
const lastName = ref('san');

// 书写一个只读计算属性
// const fullName = computed(() => {
//   return firstName.value + ' ' + lastName.value;
// });

// 书写一个可读可写的计算属性
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(newVal) {
    firstName.value = newVal.split(' ')[0];
    lastName.value = newVal.split(' ')[1];
  },
});
</script>

<style></style>
